<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/main.css" />
		<link rel="stylesheet" type="text/css" href="css/article.css" />
		<link rel="stylesheet" type="text/css" href="css/audio.css" />
		<script src="js/rem.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style type="text/css">
		.num {
			font-size: 0.7rem;
			margin-top: 0.6rem;
			color: #a9adb1;
		}
	</style>

	<body>
		<div class="content" id="content" v-cloak>
			<p class="title">{{title}}</p>
			<div class="article_content" v-html="content"></div>
			<div class="num">阅读量 {{num}}</div>
		</div>
		<script src="js/jweixin-1.4.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			getOpenId();
			//调用文章内容接口
			$.ajax({
				url: apiPath + 'article/get-detail',
				type: 'post',
				dataType: 'json',
				data: {
					open_id: open_id,
					article_id: GetQueryString("id"),
					flagsign: 1
				},
				success: function(data) {
					document.title = data.returnData.article_title;
					var right = new Vue({
						el: '#content',
						data: {
							title: data.returnData.article_title,
							content: data.returnData.article_content,
							num: data.returnData.read_num,
							article_desc: data.returnData.article_desc
						},
						mounted: function() {
							let self = this;
							self.getWx();
							//替换音频
							$('audio')[0].parentNode.style.display = 'block';
							$('audio')[0].parentNode.style.lineHeight = 'initial';
							$('audio')[0].parentNode.innerHTML = '<div class="audio_box"><div class="audio"><div id="js-play"><img src="img/5@2x.png" onclick="play()" /></div><div><div class="m-main"><div class="play-box"><div class="left"><p class="timeline"><span style=""></span></p> <div class = "info" ><span class = "size" > 00:00 </span> <span class = "timeshow" ></span> </div> </div> </div> <div class = "video" ><audio preload="auto" name="media" id="js-video" src="' +
								$('audio')[0].src + '"></audio> </div> </div> </div> </div> <p class = "audio_text" > 点击上方绿标， 即可听赏美文 </p> </div>';
							if($("#js-video")[0]) {
								var audio = $("#js-video")[0];
								$(audio).on('loadedmetadata', function() {
									audio.pause();
								});
								var timeid = setInterval(function() {
									var currentTime = audio.currentTime;
									setTimeShow(currentTime);
								}, 200);
								// 设置播放时间
								function setTimeShow(t) {
									t = Math.floor(t);
									var playTime = secondToMin(audio.currentTime);
									$(".size").html(playTime);
									if(audio.duration) {
										$('.timeshow').text(secondToMin(audio.duration));
									} else {
										$('.timeshow').text('00:00');
									}
									$('.timeline').children().css({
										width: (t / parseInt(audio.duration)).toFixed(4) * 100 + "%"
									})
								};
								// 计算时间
								function secondToMin(s) {
									var MM = Math.floor(s / 60);
									var SS = s % 60;
									if(MM < 10)
										MM = "0" + MM;
									if(SS < 10)
										SS = "0" + SS;
									var min = MM + ":" + SS;
									return min.split('.')[0];
								};
								// 播放
								$('#js-play').on('click', function() {
									if($("#js-video")[0].paused) {
										$("#js-video")[0].play();
									} else {
										$("#js-video")[0].pause();
									}
								})
							}
						},
						methods: {
							getWx: function() {
								var self = this;
								$.ajax({
									url: apiPath + 'test/get-jssdk',
									type: 'post',
									dataType: 'json',
									data: {
										open_id: open_id,
										url: document.location.href,
										flagsign: 1
									},
									success: function(data) {
										wx.config({
											debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
											appId: data.returnData.appId, // 必填，公众号的唯一标识
											timestamp: data.returnData.timestamp, // 必填，生成签名的时间戳
											nonceStr: data.returnData.nonceStr, // 必填，生成签名的随机串
											signature: data.returnData.signature, // 必填，签名，见附录1
											jsApiList: ['checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'updateAppMessageShareData', 'updateTimelineShareData'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
										});
										wx.ready(function() { //需在用户可能点击分享按钮前就先调用
											wx.onMenuShareTimeline({
												title: self.title, // 分享标题
												link: self.goUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
												imgUrl: path + 'img/33@2x.png', // 分享图标
												success: function() {},
											})
											wx.onMenuShareAppMessage({
												title: self.title, // 分享标题
												desc: self.article_desc, // 分享描述
												link: self.goUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
												imgUrl: path + 'img/33@2x.png', // 分享图标
												type: '', // 分享类型,music、video或link，不填默认为link
												dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
												success: function() {}
											});
										})
									}
								})
							},
						}
					});
				},
			});
			document.addEventListener("WeixinJSBridgeReady", function() {
				var aPlay = setInterval(paly, 500);

				function paly() {
					if($("#js-video")[0]) {
						$("#js-video")[0].play();
						clearInterval(aPlay);
					}
				}
			}, false);
		</script>
	</body>

</html>